<script>
  export default {
    layout: 'admin',
    data() {
      /**
       * 校验省市区四级级联
       * @param rule
       * @param {number} value
       * @param {function} callback 回调函数
       */
      let checkProvince = (rule, value, callback) => {
        let storeForm = this.store.storeForm;
        if (!storeForm.addressProvince) {
          return callback(new Error('省份不能为空'))
        }
        if (!storeForm.addressCity) {
          return callback(new Error('城市不能为空'))
        }
        if (!storeForm.addressDistrict) {
          return callback(new Error('区县不能为空'))
        }
        if (this.streetList.length > 0 && !storeForm.addressStreet) {
          return callback(new Error('街道不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户名称
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkAccountName = (rule, value, callback) => {
        let accountForm = this.store.accountForm;
        if (accountForm.type === 1 && !accountForm.name) {
          return callback(new Error('账户姓名不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户身份证号
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkAccountIdCard = (rule, value, callback) => {
        let accountForm = this.store.accountForm;
        if (accountForm.type === 1 && !accountForm.idCard) {
          return callback(new Error('身份证号不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户企业名称
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkEnterpriseName = (rule, value, callback) => {
        let accountForm = this.store.accountForm;
        if (accountForm.type === 0 && !accountForm.enterpriseName) {
          return callback(new Error('企业名称不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户社会统一信用代码
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkEnterpriseNo = (rule, value, callback) => {
        let accountForm = this.store.accountForm;
        if (accountForm.type === 0 && !accountForm.enterpriseNo) {
          return callback(new Error('社会统一信用代码不能为空'))
        }
        // 校验通过
        callback();
      }
      return {
        // 商店对象
        store: {
          // 基础数据
          storeForm: {
            // 主键
            id: undefined,
            // 业务主键
            businessId: undefined,
            // 名称
            name: undefined,
            // 省份
            addressProvince: undefined,
            // 城市
            addressCity: undefined,
            // 区县
            addressDistrict: undefined,
            // 街道
            addressStreet: undefined,
            // 详细门牌号
            address: undefined,
            // 面积
            area: undefined,
            // 经营大类
            mainClass: undefined,
            // 经营小类
            subClass: undefined,
          },
          // 账户数据
          accountForm: {
            // 主键
            id: undefined,
            // 账户类型[0-对公  1-对私]
            type: 0,
            // 姓名
            name: undefined,
            // 身份证号
            idCard: undefined,
            // 企业名称
            enterpriseName: undefined,
            // 企业社会统一信用代码
            enterpriseNo: undefined,
            // 银行卡号
            bankNo: undefined,
            // 银行名称
            bankName: undefined,
            // 支行名称
            bankBranchName: undefined,
            // 银行预留手机号
            bankMobile: undefined,
            // 银行所在城市
            bankCity: undefined
          },
          // 老板数据
          bossForm: {
            // 主键
            id: undefined,
            // 名称
            name: undefined,
            // 性别[0-男 1-女]
            gender: 0,
            // 身份证号
            idCard: undefined,
            // 手机号
            mobile: undefined
          },
          // 审核数据对象
          auditReply: {
            // 审核时间
            auditTime: undefined,
            // 审核备注
            auditRemark: undefined
          }
        },
        // 省份枚举列表
        provinceList: [],
        // 城市枚举列表
        cityList: [],
        // 区县枚举列表
        districtList: [],
        // 街道枚举列表
        streetList: [],
        // 经营大类枚举列表
        mainClassList: [],
        // 开户城市枚举列表
        bankCityList: [],
        // 商店校验规则对象
        storeRules: {
          // 基础数据校验规则对象
          storeRules: {
            name: [
              { required: true, message: '商店名称不能为空', trigger: 'blur' }
            ],
            province: [
              { required: true, validator: checkProvince, trigger: 'blur' }
            ],
            address: [
              { required: true, message: '详细门牌号不能为空', trigger: 'blur' }
            ],
            area: [
              { required: true, message: '商店面积不能为空', trigger: 'blur' }

            ],
            mainClass: [
              { required: true, message: '经营大类不能为空', trigger: 'blur' }
            ],
            subClass: [
              { required: true, message: '经营小类不能为空', trigger: 'blur' }
            ]
          },
          // 账户数据校验规则对象
          accountRules: {
            type: [
              { required: true, message: '账户类型不能为空', trigger: 'blur' }
            ],
            name: [
              { required: true, validator: checkAccountName, trigger: 'blur' }
            ],
            idCard: [
              { required: true, validator: checkAccountIdCard, trigger: 'blur' }
            ],
            enterpriseName: [
              { required: true, validator: checkEnterpriseName, trigger: 'blur' }
            ],
            enterpriseNo: [
              { required: true, validator: checkEnterpriseNo, trigger: 'blur' }
            ],
            bankNo: [
              { required: true, message: '银行卡号不能为空', trigger: 'blur' }
            ],
            bankName: [
              { required: true, message: '银行名称不能为空', trigger: 'blur' }
            ],
            bankBranchName: [
              { required: true, message: '支行名称不能为空', trigger: 'blur' }
            ],
            bankMobile: [
              { required: true, message: '预留手机号不能为空', trigger: 'blur' }
            ],
            bankCity: [
              { required: true, message: '开户城市不能为空', trigger: 'change' }
            ]
          },
          // 老板数据校验规则对象
          bossRules: {
            name: [
              { required: true, message: '老板姓名不能为空', trigger: 'blur' }
            ],
            gender: [
              { required: true, message: '老板性别不能为空', trigger: 'blur' }
            ],
            idCard: [
              { required: true, message: '身份证号不能为空', trigger: 'blur' }
            ],
            mobile: [
              { required: true, message: '手机号不能为空', trigger: 'blur' }
            ]
          }
        },
        // 按钮状态[false-可用 true-禁用]
        buttonLoad: false,
        // 商店管理页面检索参数
        prePageSearchForm: '',
      }
    },
    computed: {
      // 经营小类枚举列表
      subClassList() {
        let mainClass = this.store.storeForm.mainClass;
        if (!mainClass && mainClass !== 0) {
          return [];
        }
        let mainClassEnum = this.mainClassList.find(mainClassEnum => mainClassEnum.value === mainClass);
        if (!mainClassEnum) {
          return [];
        }
        return mainClassEnum.children;
      }
    },
    asyncData({ app, params, redirect } ) {
      let pageData = {
        store: {
          // 基础数据
          storeForm: {
            // 主键
            id: undefined,
            // 业务主键
            businessId: undefined,
            // 名称
            name: undefined,
            // 省份
            addressProvince: undefined,
            // 城市
            addressCity: undefined,
            // 区县
            addressDistrict: undefined,
            // 街道
            addressStreet: undefined,
            // 详细门牌号
            address: undefined,
            // 面积
            area: undefined,
            // 经营大类
            mainClass: undefined,
            // 经营小类
            subClass: undefined,
          },
          // 账户数据
          accountForm: {
            // 主键
            id: undefined,
            // 账户类型[0-对公  1-对私]
            type: 0,
            // 姓名
            name: undefined,
            // 身份证号
            idCard: undefined,
            // 企业名称
            enterpriseName: undefined,
            // 企业社会统一信用代码
            enterpriseNo: undefined,
            // 银行卡号
            bankNo: undefined,
            // 银行名称
            bankName: undefined,
            // 支行名称
            bankBranchName: undefined,
            // 银行预留手机号
            bankMobile: undefined,
            // 银行所在城市
            bankCity: undefined
          },
          // 老板数据
          bossForm: {
            // 主键
            id: undefined,
            // 名称
            name: undefined,
            // 性别[0-男 1-女]
            gender: 0,
            // 身份证号
            idCard: undefined,
            // 手机号
            mobile: undefined
          },
          // 审核数据对象
          auditReply: {
            // 审核时间
            auditTime: undefined,
            // 审核备注
            auditRemark: undefined
          }
        },
        prePageSearchForm: params.prePageSearchForm
      }
      if (!params.id) {
        // 重定向到商店管理页
        return redirect({ name: 'admin-store', params: { searchForm: params.prePageSearchForm } })
      }
      return app.$axios.$get('/store/edit/detail', { params: { id: params.id }})
        .then(({ data }) => {
          let storeDto = data.storeDto;
          let storeAccountDto = data.storeAccountDto;
          let storeBossDto = data.storeBossDto;
          let storeAuditDto = data.storeAuditDto;
          // 商店基础
          let storeForm = pageData.store.storeForm;
          for (let propKey in storeForm) {
            if (storeDto.hasOwnProperty(propKey) && storeDto[propKey] || storeDto[propKey] === 0) {
              storeForm[propKey] = storeDto[propKey];
            }
          }
          // 商店账户
          let accountForm = pageData.store.accountForm;
          for (let propKey in accountForm) {
            if (storeAccountDto.hasOwnProperty(propKey) && storeAccountDto[propKey]) {
              accountForm[propKey] = storeAccountDto[propKey]
            }
          }
          // 商店老板
          let bossForm = pageData.store.bossForm;
          for (let propKey in bossForm) {
            if (storeBossDto.hasOwnProperty(propKey) && storeBossDto[propKey]) {
              bossForm[propKey] = storeBossDto[propKey]
            }
          }
          // 商店审核
          if (storeAuditDto) {
            let auditReply = pageData.store.auditReply;
            for (let propKey in auditReply) {
              if (storeAuditDto.hasOwnProperty(propKey)) {
                auditReply[propKey] = storeAuditDto[propKey];
              }
            }
          }

          return pageData;
        })
        .catch(() => {});
    },
    created() {
      if (process.client) {
        // 加载枚举数据
        this.getEnumData();
      }
    },
    methods: {
      /**
       * 获取页面枚举数据方法
       */
      getEnumData() {
        this.$axios.$get("/store/modify/enums", { params: { id: this.store.storeForm.id }})
          .then(({ data }) => {
            this.provinceList = data.provinceList;
            this.cityList = data.cityList;
            this.districtList = data.districtList;
            this.streetList = data.streetList;
            this.bankCityList = data.bankCityList;
            this.mainClassList = data.mainClassList;
          })
          .catch(() => {});
      },
      /**
       * 选择经营大类事件
       */
      changeMainClassHandle() {
        this.store.storeForm.subClass = undefined;
      },
      /**
       * 选择省份事件
       */
      changeProvinceHandle() {
        let storeForm = this.store.storeForm;
        storeForm.addressCity = undefined;
        storeForm.addressDistrict = undefined;
        storeForm.addressStreet = undefined;

        this.cityList = [];
        this.districtList = [];
        this.streetList = [];
        if (storeForm.addressProvince) {
          // 加载城市
          this.getRegionList(storeForm.addressProvince, 0);
        }
      },
      /**
       * 选择城市事件
       */
      changeCityHandle() {
        let storeForm = this.store.storeForm;
        storeForm.addressDistrict = undefined;
        storeForm.addressStreet = undefined;

        this.districtList = [];
        this.streetList = [];
        if (storeForm.addressCity) {
          // 加载区县
          this.getRegionList(storeForm.addressCity, 1);
        }
      },
      /**
       * 选择区县事件
       */
      changeDistrictHandle() {
        let storeForm = this.store.storeForm;
        storeForm.addressStreet = undefined;

        this.streetList = [];
        if (storeForm.addressDistrict) {
          // 加载街道
          this.getRegionList(storeForm.addressDistrict, 2);
        }
      },
      /**
       * 获取城市、区县、街道列表方法
       * @param {number} code 上级code
       * @param {number} type 类型[0-城市 1-区县 2-街道]
       */
      getRegionList(code, type) {
        this.$axios.$get('/region-code/childrenList', { params: { code }})
          .then(({ data }) => {
            if (type === 0) {
              this.cityList = data;
            } else if (type === 1) {
              this.districtList = data;
            } else if (type === 2) {
              this.streetList = data;
            } else {
              // empty
            }
          })
          .catch(() => {});
      },
      /**
       * 经营面积输入事件
       * @param value 最新值
       */
      inputAreaHandle(value) {
        let storeForm = this.store.storeForm;
        // 正则匹配数据
        let matchRes = value.match(/[1-9]?[0-9]*(\.[0-9]{0,2})?/);
        if (!matchRes) {
          storeForm.area = '';
          return;
        }
        storeForm.area = matchRes[0];
      },
      /**
       * 选择账户类型事件
       */
      changeAccountTypeHandle() {
        let accountForm = this.store.accountForm;
        if (accountForm.type === 0) {
          accountForm.name = undefined;
          accountForm.idCard = undefined;
        } else {
          accountForm.enterpriseName = undefined;
          accountForm.enterpriseNo = undefined;
        }
        // 清楚表单校验状态
        this.$refs.accountForm.clearValidate(['name', 'idCard', 'enterpriseName', 'enterpriseNo'])
      },
      /**
       * 提交商店事件
       */
      submitStoreHandle() {
        this.$refs.storeForm.validate()
          .then(res => {
            console.log("storeForm res", res);

            return this.$refs.accountForm.validate();
          })
          .then(res => {
            console.log("accountForm res", res);

            return this.$refs.bossForm.validate();
          })
          .then(res => {
            console.log("bossForm res", res);
            // 按钮禁用
            this.buttonLoad = true;

            let store = this.store;
            let body = {
              storeVo: store.storeForm,
              storeAccountVo: store.accountForm,
              storeBossVo: store.bossForm
            }

            return this.$axios.$post('/store/modify', body);
          })
          .then(() => {
            this.notify('success', '提示', '商店提交操作成功');

            // 返回管理页面
            this.backPrePageHandle();
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复正常
            this.buttonLoad = false;
          });
      },
      /**
       * 返回商店管理页事件
       */
      backPrePageHandle() {
        // 跳回管理页面
        this.$router.replace({ name: 'admin-store', params: { searchForm: this.prePageSearchForm }});
      },
    }
  }
</script>

<template>
  <div class="store-modify-page">
    <div v-if="store.auditReply.auditTime" class="module-title">
      审核信息
    </div>
    <el-form v-if="store.auditReply.auditTime" size="mini"  label-width="100px">
      <el-form-item label="审核时间">
        <span>{{ store.auditReply.auditTime }}</span>
      </el-form-item>
      <el-form-item label="审核回复">
        <div>{{ store.auditReply.auditRemark }}</div>
      </el-form-item>
    </el-form>
    <div class="module-title">
      基础信息
    </div>
    <el-form size="mini" :model="store.storeForm" :rules="storeRules.storeRules" label-width="100px" ref="storeForm">
      <el-form-item label="商店名称" prop="name">
        <el-input v-model="store.storeForm.name" clearable maxlength="30" show-word-limit placeholder="请输入商店名称"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="商店地址" prop="province">
        <el-select v-model="store.storeForm.addressProvince" filterable clearable placeholder="请选择省份"
                   @change="changeProvinceHandle">
          <el-option-group v-for="provinceGroup in provinceList" :key="'province' + provinceGroup.name"
                           :label="provinceGroup.name">
            <el-option v-for="province in provinceGroup.list" :key="'province' + province.value" :label="province.name"
                       :value="province.value">
            </el-option>
          </el-option-group>
        </el-select>
        <el-select v-model="store.storeForm.addressCity" filterable clearable placeholder="请选择城市"
                   @change="changeCityHandle">
          <el-option-group v-for="cityGroup in cityList" :key="'city' + cityGroup.name" :label="cityGroup.name">
            <el-option v-for="city in cityGroup.list" :key="'city' + city.value" :label="city.name" :value="city.value">
            </el-option>
          </el-option-group>
        </el-select>
        <el-select v-model="store.storeForm.addressDistrict" filterable clearable placeholder="请选择区县"
                   @change="changeDistrictHandle">
          <el-option-group v-for="districtGroup in districtList" :key="'district' + districtGroup.name"
                           :label="districtGroup.name">
            <el-option v-for="district in districtGroup.list" :key="'district' + district.value"
                       :label="district.name" :value="district.value">
            </el-option>
          </el-option-group>
        </el-select>
        <el-select v-show="streetList.length > 0" v-model="store.storeForm.addressStreet" filterable clearable
                   placeholder="请选择街道">
          <el-option-group v-for="streetGroup in streetList" :key="'street' + streetGroup.name"
                           :label="streetGroup.name">
            <el-option v-for="street in streetGroup.list" :key="'street' + street.value"
                       :label="street.name" :value="street.value">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item prop="address">
        <el-input v-model="store.storeForm.address" clearable maxlength="30" show-word-limit placeholder="请输入详细门牌号"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="商店面积" prop="area">
        <el-input v-model="store.storeForm.area" clearable maxlength="10" show-word-limit placeholder="请输入商店面积"
                  @input="inputAreaHandle" class="width30Percent">
          <span slot="suffix">平米</span>
        </el-input>
      </el-form-item>
      <el-form-item label="经营大类" prop="mainClass">
        <el-select v-model="store.storeForm.mainClass" clearable placeholder="请选择经营大类" @change="changeMainClassHandle">
          <el-option v-for="mainClass in mainClassList" :key="'mainClass' + mainClass.value"
                     :label="mainClass.name" :value="mainClass.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经营小类" prop="subClass">
        <el-select v-model="store.storeForm.subClass" clearable placeholder="请选择经营小类">
          <el-option v-for="subClass in subClassList" :key="'subClass' + subClass.value"
                     :label="subClass.name" :value="subClass.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="module-title">
      账户信息
    </div>
    <el-form size="mini" :model="store.accountForm" :rules="storeRules.accountRules" label-width="100px" ref="accountForm">
      <el-form-item label="账户类型" prop="type">
        <el-radio-group v-model="store.accountForm.type" @change="changeAccountTypeHandle">
          <el-radio :label="0" border>对公</el-radio>
          <el-radio :label="1" border>对私</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="store.accountForm.type === 1" label="账户姓名" prop="name">
        <el-input v-model="store.accountForm.name" clearable maxlength="30" show-word-limit placeholder="请输入账户姓名"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="store.accountForm.type === 1" label="身份证号" prop="idCard">
        <el-input v-model="store.accountForm.idCard" clearable maxlength="18" show-word-limit placeholder="请输入身份证号"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="store.accountForm.type === 0" label="企业名称" prop="enterpriseName">
        <el-input v-model="store.accountForm.enterpriseName" clearable maxlength="30" show-word-limit
                  placeholder="请输入企业名称" class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="store.accountForm.type === 0" label="社会统一信用代码" prop="enterpriseNo">
        <el-input v-model="store.accountForm.enterpriseNo" clearable maxlength="18" show-word-limit
                  placeholder="请输入社会统一信用代码" class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankNo">
        <el-input v-model="store.accountForm.bankNo" clearable maxlength="20" show-word-limit placeholder="请输入银行卡号"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="银行名称" prop="bankName">
        <el-input v-model="store.accountForm.bankName" clearable maxlength="20" show-word-limit placeholder="请输入银行名称"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="支行名称" prop="bankBranchName">
        <el-input v-model="store.accountForm.bankBranchName" clearable maxlength="30" show-word-limit
                  placeholder="请输入支行名称" class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="预留手机号" prop="bankMobile">
        <el-input v-model="store.accountForm.bankMobile" clearable maxlength="11" show-word-limit
                  placeholder="请输入预留手机号" class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="开户城市" prop="bankCity">
        <el-select v-model="store.accountForm.bankCity" filterable clearable placeholder="请选择开户城市">
          <el-option-group v-for="bankCityGroup in bankCityList" :key="'bankCity' + bankCityGroup.name"
                           :label="bankCityGroup.name">
            <el-option v-for="bankCity in bankCityGroup.list" :key="'bankCity' + bankCity.value"
                       :label="bankCity.name" :value="bankCity.value">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="module-title">
      老板信息
    </div>
    <el-form size="mini" :model="store.bossForm" :rules="storeRules.bossRules" label-width="100px" ref="bossForm">
      <el-form-item label="老板姓名" prop="name">
        <el-input v-model="store.bossForm.name" clearable maxlength="30" show-word-limit placeholder="请输入老板姓名"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="老板性别" prop="gender">
        <el-radio-group v-model="store.bossForm.gender">
          <el-radio :label="0" border>男</el-radio>
          <el-radio :label="1" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="store.bossForm.idCard" clearable maxlength="18" show-word-limit placeholder="请输入老板身份证号"
                  class="width30Percent">
        </el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="store.bossForm.mobile" clearable maxlength="11" show-word-limit placeholder="请输入老板手机号"
                  class="width30Percent">
        </el-input>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button :disabled="buttonLoad" type="primary" size="small" @click="submitStoreHandle">
        提 交
      </el-button>
      <el-button :disabled="buttonLoad" size="small" @click="backPrePageHandle" class="back-btn">
        返 回
      </el-button>
    </div>
  </div>
</template>

<style scoped>
  .store-modify-page .module-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 35px;
    background-color: #F2F6FC;
    border-radius: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
  }
  .store-modify-page .width30Percent {
    width: 30%;
  }
  .store-modify-page .btn-box {
    padding-top: 18px;
    padding-left: 100px;
    margin-bottom: 18px;
    border-top: 1px dashed #606266;
  }
  .store-modify-page .btn-box .back-btn {
    margin-left: 30px;
  }
</style>
